<template>
  <div v-show="show">
    <!-- tabs -->
    <el-container class="container-box">
      <el-main class="padding0">
        <el-tabs type="border-card" @tab-change="tabChange" v-model="activeName">
          <el-tab-pane :lazy="true" name="我的题单" label="我的题单">
            <router-view v-bind="{ user }"></router-view>
          </el-tab-pane>
          <el-tab-pane :lazy="true" name="我的题库" label="我的题库">
            <router-view v-bind="{ user }"></router-view>
          </el-tab-pane>
        </el-tabs>
        <!-- <ul class="nav nav-tabs mt-3">
            <li class="nav-item">
              <router-link :to="{ name: '我的题单' }" active-class="active" class="nav-link">我的题单</router-link>
            </li>
            <li class="nav-item">
              <router-link :to="{ name: '我的题库' }" active-class="active" class="nav-link">我的题目</router-link>
            </li>
          </ul> -->
      </el-main>
    </el-container>
  </div>
</template>


<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import {
  useRoute,
  useRouter,
} from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
const store = useStore(Storekey);
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const router = useRouter();

const route = useRoute();
const show = ref(true);
watch(
  () => user.value,
  (e) => {
    if (!e) router.push("/");
  }
);

watch(
  () => route.name,
  (name) => {
    if (name === "加入团队") {
      show.value = false;
    } else {
      show.value = true;
    }
  }
);

const activeName = ref("我的题单")
onMounted(() => {
  if (!user.value) router.push("/");
  start()
});
async function start() {
  tabChange(activeName.value)
}
// 跳转
function tabChange(name: string) {
  router.push({ name: name, });
}
</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 5% 0;
  margin: var(--container-margin) 0rem 0 0rem;
  /* 外边距 */
  --container-margin: 20px;
  --container-header-height: 10vh;
  --container-bg-color: #fff;
}

.container-content {
  background: var(--container-bg-color);
  padding: 0;
  /* padding: var(--container-margin); */
  min-width: 100%;
}
</style>
